<template>
  <div class="u-p-20">
    <el-card shadow="never">
      <div slot="header">
        <b class="u-f-16">
          <span v-if="objForm.id">编辑</span>
          <span v-else>添加</span>Banner
        </b>
        <div class="u-right u-5mt">
          <el-button
            type="success"
            size="small"
            icon="el-icon-document-checked"
            @click="submitForm('objForm')"
          >提交保存</el-button>
          <el-button size="small" icon="el-icon-back" @click="$router.go(-1)">返回</el-button>
        </div>
      </div>
      <el-form :model="objForm" :rules="rules" ref="objForm" label-width="100px" class="u-form">
        <el-form-item label="显示区域">
          <el-select v-model="objForm.area" class="u-w-block">
            <el-option label="顶部banner" value="comindex"></el-option>
            <el-option label="公司介绍" value="company"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Banner标题" prop="banner_title">
          <el-input
            v-model="objForm.banner_title"
            placeholder="请输入Banner标题"
            maxlength="30"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="跳转类型">
          <el-select v-model="objForm.jump_type" class="u-w-block">
            <el-option label="无跳转" :value="0"></el-option>
            <el-option label="商品页面" :value="1"></el-option>
            <el-option label="外部链接" :value="2"></el-option>
            <el-option label="图片详情" :value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="跳转链接" v-show="objForm.jump_type==2">
          <el-input
            v-model="objForm.jump_link"
            placeholder="请输入跳转链接"
            maxlength="255"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item label="商品id" v-show="objForm.jump_type==1">
          <el-input v-model="objForm.goods_id" placeholder="商品id" maxlength="255" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="时间区间">
          <el-col :span="11">
            <el-date-picker
              type="datetime"
              value-format="timestamp"
              placeholder="生效时间"
              v-model="objForm.start_time"
              style="width: 100%;"
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-date-picker
              type="datetime"
              value-format="timestamp"
              placeholder="失效时间"
              v-model="objForm.end_time"
              style="width: 100%;"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="上传图片" prop="banner_src">
          <upload
            file-folder="banner"
            :file-arr="fileList"
            list-type="picture-card"
            :limit="1"
            accept="image/jpeg, image/png"
            tips="只能上传jpg/png文件，且不超过4MB"
            @getUploadFiles="getUploadFiles"
          ></upload>
        </el-form-item>
        <el-form-item label="banner详情" prop="banner_detail" v-show="objForm.jump_type==3">
          <upload-drag
            file-folder="banner_detail"
            :file-arr="fileList2"
            :multiple="true"
            list-type="picture-card"
            :limit="31"
            accept="image/jpeg, image/png"
            tips="只能上传jpg/png文件，且不超过4MB"
            @getUploadFiles="bannerDetail"
          ></upload-drag>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="objForm.rank" :min="0" label="数值越大权重越高"></el-input-number>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import commonEdit from "@/mixins/common-edit";
import Upload from "@/components/upload/upload";
import UploadDrag from "@/components/uploaddrag/uploaddrag";
export default {
  components: {
    Upload,
    UploadDrag,
  },
  mixins: [commonEdit],
  data() {
    return {
      apiName: "companyBanner",
      backRoute: "companyBanner",
      fileList: [],
      fileList2: [], //详情
      objForm: {
        id: "",
        banner_title: "",
        banner_src: "",
        banner_detail: "",
        area:"comindex",
        jump_type: 0,
        jump_link: "",
        goods_id: 0,
        end_time: "",
        start_time: "",
        status: 1,
        rank: 0,
      },
      rules: {
        banner_title: [
          {
            required: true,
            message: "请输入Banner标题",
            trigger: "blur",
          },
          {
            max: 30,
            message: "最大长度30个字符",
            trigger: "blur",
          },
        ],
        banner_src: [
          {
            required: true,
            message: "请上传Banner图片",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    bannerDetail(files) {
      //详情上传回调
      this.fileList2 = files;
      this.objForm.banner_detail = "";
      for (var i = 0; i < files.length; i++) {
        this.objForm.banner_detail +=
          this.objForm.banner_detail == "" ? files[i].url : "," + files[i].url;
      }
    },
    afterGetInfo() {
      if (this.objForm.banner_src) {
        this.fileList = [
          {
            name: "banner_src",
            url: this.objForm.banner_src,
          },
        ];
      }
      for (var j = 0; j < this.objForm.banner_detail.length; j++) {
        this.fileList2.push({
          url: this.objForm.banner_detail[j],
        }); //详情
      }
    },
    getUploadFiles(files) {
      this.fileList = files;
      this.objForm.banner_src = files[0]["url"];
    },
  },
};
</script>
